<template>
  <div class="box">
    <div class="header">
      <h3>忘记密码</h3>
    </div>
    <div class="c_header">
      <el-steps
        style="min-width: 700px"
        :active="active"
        finish-status="success"
      >
        <el-step title="账号" />
        <el-step title="验证" />
        <el-step title="密码" />
        <el-step title="返回" />
      </el-steps>
    </div>
    <div class="Step" v-if="active === 0">
      <h3>账号验证：</h3>
      <div class="StepContent">
        <el-form
          :model="submitParams"
          ref="submitParams"
          :rules="rules"
          class="submitParams"
        >
          <el-form-item label="账号：" prop="username">
            <el-input v-model="submitParams.username" />
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" class="button" size="large" @click="step0()"
        >下一步</el-button
      >
    </div>
    <div class="Step" v-if="active === 1">
      <h3>身份验证：</h3>
      <div class="StepContent">
        <el-form :model="submitParams" ref="submitParams" class="submitParams">
          <el-form-item label="预留姓名：" prop="name">
            <el-input v-model="submitParams.name" />
          </el-form-item>
          <el-form-item label="预留电话：" prop="telephone">
            <el-input v-model="submitParams.telephone" />
          </el-form-item>
          <el-form-item label="预留邮箱：" prop="email">
            <el-input v-model="submitParams.email" />
          </el-form-item>
          <el-form-item label="执照编号：" prop="license">
            <el-input v-model="submitParams.license" type="password" />
          </el-form-item>
          <el-form-item label="身份证号：" prop="idcard">
            <el-input v-model="submitParams.idcard" type="password" />
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" class="button" size="large" @click="step1()"
        >下一步</el-button
      >
    </div>
    <div class="Step" v-if="active === 2">
      <h3>密码修改：</h3>
      <div class="StepContent">
        <el-form :model="submitParams" ref="submitParams" class="submitParams">
          <el-form-item label="新密码：" prop="password">
            <el-input v-model="submitParams.password" type="password" />
          </el-form-item>
          <el-form-item label="确认新密码：" prop="password2">
            <el-input v-model="submitParams.password2" type="password" />
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" class="button" size="large" @click="step2()"
        >下一步</el-button
      >
    </div>
    <div class="Step" v-if="active === 3 || active === 4">
      <h3>返回登录：</h3>
      <div class="StepContent">
        <span>密码修改完成，点击返回登录。</span>
      </div>
      <el-button type="primary" class="button" size="large" @click="step3()"
        >返回登录</el-button
      >
    </div>
  </div>
</template>
<script>
import { ElMessage, ElLoading } from "element-plus";
import { FindInfo, updatePW } from "@/api/login";
export default {
  data() {
    return {
      submitParams: {},
      active: 0,
      resultParams: {},
      rules: {
        username: [
          {
            required: true,
            message: "请输入合法的用户名",
            trigger: "blur",
            pattern: /^\d+$/,
          },
        ],
      },
    };
  },
  methods: {
    step0() {
      if (this.submitParams.username === undefined) {
        ElMessage({
          message: "请输入用户名",
          type: "error",
        });
        return;
      }
      FindInfo(this.submitParams.username).then((res) => {
        if (res.data.data !== null) {
          this.resultParams = res.data.data;
          this.active++;
        } else {
          ElMessage({
            message: "用户不存在",
            type: "error",
          });
        }
      });
    },
    step1() {
      if (this.submitParams.name === this.resultParams.name) {
        if (this.submitParams.telephone === this.resultParams.telephone) {
          if (this.submitParams.email === this.resultParams.email) {
            if (this.submitParams.license === this.resultParams.license) {
              if (this.submitParams.idcard === this.resultParams.idcard) {
                ElMessage({
                  message: "身份验证成功。",
                  type: "success",
                });
                this.active++;
              } else {
                ElMessage({
                  message: "身份验证有误，请检查无误后重新输入。",
                  type: "error",
                });
              }
            } else {
              ElMessage({
                message: "身份验证有误，请检查无误后重新输入。",
                type: "error",
              });
            }
          } else {
            ElMessage({
              message: "身份验证有误，请检查无误后重新输入。",
              type: "error",
            });
          }
        } else {
          ElMessage({
            message: "身份验证有误，请检查无误后重新输入。",
            type: "error",
          });
        }
      } else {
        ElMessage({
          message: "身份验证有误，请检查无误后重新输入。",
          type: "error",
        });
      }
    },
    step2() {
      if (this.submitParams.password === this.submitParams.password2) {
        updatePW({
          username: this.submitParams.username,
          password: this.submitParams.password,
        }).then((res) => {
          ElMessage({
            message: "密码修改成功，请使用新密码登录。",
            type: "success",
          });
          this.active++;
        });
      } else {
        ElMessage({
          message: "两次密码不一致，请检查无误后重新输入。",
          type: "error",
        });
      }
    },
    step3() {
      this.active++;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.8)",
      });
      setTimeout(() => {
        loading.close();
      }, 1500);
      setTimeout(() => {
        this.$router.push("/login");
      }, 1700);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  .header {
    padding: 20px;
    h3 {
      font-size: 30px;
      font-weight: 600;
    }
  }
  .c_header {
    margin-top: 12px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .Step {
    margin-top: 50px;
    width: 100%;
    height: auto;
    h3 {
      padding: 10px;
      font-weight: 550;
    }
    .StepContent {
      display: flex;
      justify-content: center;

      align-items: center;
      ::v-deep .submitParams .el-form-item__label {
        font-weight: 600;
        font-size: 18px;
        width: 125px !important;
      }
      .submitParams .el-input {
        width: 225px;
      }
    }
    .button {
      width: 200px;
      margin-top: 50px;
      margin-left: 300px;
      margin-right: 300px;
    }
  }
}
</style>
